@import "global";
@import "icons";
// 级联菜单 + 右键菜单

$menu-z-index: 2;
$menu-container-display: block; // 菜单容器
$menu-container-direction: left;// 一级li

$menu-group-line-margin: rem-calc(4) 0;
$menu-content-padding: rem-calc(5) 0;

$menu-item-font-size: rem-calc(12);
$menu-item-display: block;
$menu-item-gap: rem-calc(10); // 菜单项空隙
$menu-item-filling: rem-calc(20); // 两侧填充尺寸
$menu-item-min-width: rem-calc(140); // 最小尺寸
$menu-item-font-padding: rem-calc(5) rem-calc(8); // 权重低默认

// 颜色定义
$menu-group-line-color: #ebebeb;
$menu-content-border-color: #d3d7d9;
$menu-content-bg-color: #ffffff;
$menu-item-hover-bg-color: #f0f0f0;
$menu-content-box-shadow: 2px 2px 9px #e6e7e7;
$menu-item-font-color: $black;

// 右键菜单
$rmenu-padding: rem-calc(5) rem-calc(1);
$rmenu-item-height: rem-calc(24);
$rmenu-item-font-size: rem-calc(14);
$rmenu-item-min-width: rem-calc(120); // 最小尺寸
$rmenu-item-padding-left: rem-calc(20);
$rmenu-item-padding-right: rem-calc(10);
$rmenu-item-disabled-bg-color: rgba(172, 171, 167, .5);

@include exports ("menu") {
  .menu { // ul
    margin: 0; padding: 0;
    position: relative;
    z-index: 119;

    li {
      display: $menu-container-display;
      float: $menu-container-direction;

      &.hover { // 悬浮
        position: relative; // 下层容器相对定位
        z-index: $menu-z-index;
        > ul { display: block; } // 展开下层
      }
      &.group-line { // 组分割线
        border-bottom: 1px solid $menu-group-line-color;
        margin: $menu-group-line-margin;
      }
      &.child::before { // 子项icon
        content: "";
        display: inline-block;
        float: right;
        margin: 12px 4px 0 0;
        @extend .icon-arrow;
        @include rotate2d(-90deg);
        -ms-transform:rotate(-90deg);
      }

      > ul { // 二级菜单容器
        padding: $menu-content-padding;
        background-color: $menu-content-bg-color;
        border: 1px solid $menu-content-border-color;

        a { // 菜单项尺寸定义
          min-width: $menu-item-min-width;
          padding: $menu-item-gap/2 $menu-item-filling;
          &:hover { background-color: $menu-item-hover-bg-color; }
        }
      }
    }

    ul {
      position: absolute; // 根据li绝对定位
      display: none;
      padding: 0; margin: 0;
      box-shadow:$menu-content-box-shadow;

      ul {
        top: 0;
        left: 100%;
        margin-left: -5px;
        box-shadow: $menu-content-box-shadow;
      }
      li { float: none; }
    }

    a { // 菜单项的大小控制
      display: $menu-item-display;
      padding: $menu-item-font-padding; // 权重低默认
      font-size: 14px;
      color: $menu-item-font-color;
      cursor: default;
      white-space: nowrap;
      vertical-align: middle;
      text-decoration: none;
      border: 1px solid transparent;
    }

    > li.hover > a { // 向下覆盖li形成一个整体的框
      position: relative;
      border: 1px solid $menu-content-border-color;
      border-bottom-color: $menu-content-border-color;
      background-color: $menu-content-bg-color;
      box-shadow: $menu-content-box-shadow;

      &::after { // 遮盖阴影
        content: "";
        position: absolute;
        z-index: 100;
        display: inline-block;
        height: 9px; width: 100%;
        left: 0; bottom: -2px;
        background-color: $menu-content-bg-color;
      }
    }
  }

  .rmenu {
    //display: none;
    position: absolute;
    border: 1px solid $menu-content-border-color;
    background-color: white;
    color: black;
    box-shadow: 1px 1px 5px rgba(158, 158, 158, .5);
    opacity: .96;
  }
  .rmenu ul {
    margin: 0;
    padding: $rmenu-padding;
    list-style: none;
  }
  .rmenu li {
    font-size: $rmenu-item-font-size;
    min-width: $rmenu-item-min-width;
    padding-left: $rmenu-item-padding-left;
    padding-right: $rmenu-item-padding-right;
    line-height: $rmenu-item-height;
    cursor: pointer;

    &:hover {
      background-color: $menu-item-hover-bg-color;
    }
    &.group-line {
      border-bottom: 1px solid $menu-group-line-color;
      margin: $menu-group-line-margin;
    }
    &.disabled {
      color: $rmenu-item-disabled-bg-color;
      cursor: default;
      background-color: white;
    }
  }
}

